<template>
  <div id="totalMiddleTop">
    <div class="d-flex jc-between" style="height: 100%; align-items: flex-start;">
      <div class="list_sty d-flex jc-center mltbox" v-for="(item, index) in caseList" :key="index">
        <div class="m-t-title">
          <el-image :src="require(`@/assets/background/btn2-${index + 1}bg.svg`)" fit="fill"></el-image>
          {{ item.label }}
        </div>
        <div class="m-t-value">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import Charts from "@jiaminghi/charts";
// import { equipmentRunCount } from "@/api/ops/dashboard";
import btn21bg from "@/assets/background/btn2-1bg.svg";

export default {
  data() {
    return {
      myChart: null,
      options: {},
      caseList: [
        { label: '入户收入（元）', value: 57638 },
        { label: '智能产品收入（元）', value: 53892 },
        { label: '生活品收入（元）', value: 356469 },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
    },
  },
};
</script>

<style lang="scss">
#totalMiddleTop {
  height: 100%;

  .mltbox {
    // background-image: url("~@/assets/background/btn3-content.svg");
    // background-size: 100% 100%;
    flex-direction: column;
    align-items: center;
    width: 32%;
    height: 100%;
    justify-content: flex-start;
    background: url("~@/assets/background/btn3-content.svg") center no-repeat;
    background-size: contain;

    .m-t-title {
      width: 100%;
      line-height: 0.64rem;
      height: 0.64rem;
      color: #fff;
      display: flex;
      align-items: center;
      padding-left: 0.2rem;

      .el-image {
        display: flex;
        margin-right: 8px;
      }
    }

    // .m-t-title0 {
    //   // background-image: url("~@/assets/background/btn3-1.svg");
    //   width: 100%;
    //   // background-size: cover;
    //   line-height: 0.64rem;
    //   text-align: center;
    //   height: 0.64rem;
    //   color: #fff;
    // }

    // .m-t-title1 {
    //   // background-image: url("~@/assets/background/btn3-2.svg");
    //   width: 100%;
    //   // background-size: cover;
    //   line-height: 0.64rem;
    //   text-align: center;
    //   height: 0.64rem;
    //   color: #fff;
    // }

    // .m-t-title2 {
    //   // background-image: url("~@/assets/background/btn3-3.svg");
    //   width: 100%;
    //   // background-size: cover;
    //   line-height: 0.64rem;
    //   text-align: center;
    //   height: 0.64rem;
    //   color: #fff;
    // }

    .m-t-value {
      width: 100%;
      flex: 1;
      justify-content: center;
      display: flex;
      align-items: center;
      font-size: 0.3rem;
      color: #fff;
    }
  }
}
</style>
